<template>
  <div class="editAgent">
    <el-form ref="editRoleForm" v-loading="editAgentLoading" :model="editRoleForm"
      :rules="editRoleRules" label-width="100px" class="editAgentCls">
      <el-form-item label="点赞数量：" prop="likeTotal">
        <el-input-number v-model="editRoleForm.likeTotal" @change="likeTotalChange" size="small"
          label="点赞数量"></el-input-number>
        <el-divider direction="vertical" />
        <el-button type="primary" size="small" @click="addNum(10,1)">+10</el-button>
        <el-button type="primary" size="small" @click="addNum(100,1)">+100</el-button>
        <el-button type="primary" size="small" @click="addNum(1000,1)">+1000</el-button>
        <el-button type="primary" size="small" @click="addNum(10000,1)">+10000</el-button>
      </el-form-item>
      <el-form-item label="评论数量：" prop="commentTotal">
        <el-input-number v-model="editRoleForm.commentTotal" @change="commentTotalChange"
          size="small" label="评论数量"></el-input-number>
        <el-divider direction="vertical" />
        <el-button type="primary" size="small" @click="addNum(10,2)">+10</el-button>
        <el-button type="primary" size="small" @click="addNum(100,2)">+100</el-button>
        <el-button type="primary" size="small" @click="addNum(1000,2)">+1000</el-button>
        <el-button type="primary" size="small" @click="addNum(10000,2)">+10000</el-button>
      </el-form-item>
      <el-form-item label="电影观看数：" prop="browseMovieTotal">
        <el-input-number v-model="editRoleForm.browseMovieTotal" @change="browseMovieTotalChange"
          size="small" label="电影观看数量"></el-input-number>
        <el-divider direction="vertical" />
        <el-button type="primary" size="small" @click="addNum(10,3)">+10</el-button>
        <el-button type="primary" size="small" @click="addNum(100,3)">+100</el-button>
        <el-button type="primary" size="small" @click="addNum(1000,3)">+1000</el-button>
        <el-button type="primary" size="small" @click="addNum(10000,3)">+10000</el-button>
      </el-form-item>
      <div class="subBtnWid">
        <el-button size="small" type="primary" :loading="loadingBtn"
          @click="subRoles('editRoleForm')">提交</el-button>
      </div>
      <div class="subBtnWid">
        <el-button size="small" @click="subClone('editRoleForm')">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { getUserRankApi, putUserRankApi } from '@/api/interaction';

export default {
  name: 'Index',
  props: {
    editId: {
      type: [String, Number],
    },
    selectedId: {
      type: [String],
    },
  },
  data() {
    return {
      editRoleForm: {
        likeTotal: 0,
        commentTotal: 0,
        browseMovieTotal: 0,
      },
      editRoleRules: {
        likeTotal: [
          { required: true, message: '请输入点赞数量', trigger: 'change' },
        ],
        commentTotal: [
          { required: true, message: '请选择评论数量', trigger: 'change' },
        ],
        browseMovieTotal: [
          { required: true, message: '请选择电影浏览数量', trigger: 'change' },
        ],
      },
      editAgentLoading: false,
      loadingBtn: false,
    };
  },
  mounted() {
    if (this.editId && this.selectedId) {
      this.getInteractStatistics();
    }
  },
  methods: {
    likeTotalChange(value) {
      console.log(value);
    },
    commentTotalChange(value) {
      console.log(value);
    },
    browseMovieTotalChange(value) {
      console.log(value);
    },
    addNum(num, id) {
      console.log(num, id);
      if (id == 1) {
        this.editRoleForm.likeTotal += num;
      } else if (id == 2) {
        this.editRoleForm.commentTotal += num;
      } else if (id == 3) {
        this.editRoleForm.browseMovieTotal += num;
      }
    },
    /**
     * 关闭
     */
    subClone() {
      this.$emit('close');
    },
    /**
     * 提交
     */
    subRoles(formName) {
      console.log('formName', formName);
      this.$refs.editRoleForm.validate((valid) => {
        if (valid) {
          this.$set(this, 'loadingBtn', true);
          putUserRankApi(this.selectedId, this.editId, this.editRoleForm)
            .then(() => {
              this.$message.success('编辑成功');
              this.$emit('getRolesList');
              this.$emit('close');
              this.$set(this, 'loadingBtn', false);
            })
            .catch(() => {
              this.$set(this, 'loadingBtn', false);
            });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    /**
     * 获取角色信息
     */
    getInteractStatistics() {
      getUserRankApi(this.selectedId, this.editId)
        .then((res) => {
          console.log('editRoleForm》》》', res);
          this.$set(this, 'editRoleForm', res);
        })
        .catch(() => {
          this.$set(this, 'editRoleForm', {});
          this.$set(this, 'editAgentLoading', false);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

<style lang="scss">
.el-dialog.agentUserDialogCls {
  max-width: 1000px;
}
</style>
